// const HtmlWebpackPlugin = require('html-webpack-plugin');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path')
const { entry, htmlPlugins } = require('./dynamicConfig')
module.exports = {
    //设置当前环境（无环境）
    mode: "none",
    //入口
    entry,
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "js/[contenthash:6].js",
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.html/i,
                loader: 'html-loader',
                //允许srcset属性为空
                options: {
                    sources: {
                        list: [
                            '...',
                            // 指定检测元素的属性
                            {
                                tag: 'img',
                                attribute: 'srcset',
                                type: 'srcset',
                                filter: () => false,
                            },
                        ],

                    }
                },
            },

            {
                test: /\.css$/i,
                //我们在webpack.config.js里面配置了style-loader和css-loader后，遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件，遇到类似“import "xxx.css"”这类引入css的语句就将相应css文件引入（也就是说，如果没有css-loader，就没法解析这类语句），最后将计算完的css（之所以说计算，是因为有可能是使用less等预编译语言编写的css）通过style-loader放入到一个style标签里面，最终放到页面的head标签里，流程就是这样了。
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.jpg|png|jpeg|gif$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[contenthash:6][ext]'
                }
            },
            {
                test: /\.svg$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'svg/[name][ext]'
                }
            },
            {
                test: /\.(woff|woff2|ttf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name][ext]'
                }
            },

        ]
    },
    plugins: [
        //将htmlPlugins这个数组解构出来
        ...htmlPlugins,
        //     new HtmlWebpackPlugin({
        //     title: 'index',
        //     filename: 'index.html',
        //     template: './src/index.html',
        //     chunks: ['index']
        // }),
        // new HtmlWebpackPlugin({
        //     title: 'login',
        //     template: './src/html/login.html',
        //     filename: 'html/login.html',
        //     chunks: ['login']
        // })
        // new BundleAnalyzerPlugin()
    ],
    optimization: {
        //引入ajax，默认的打包会重复打包，这个时候就可以优化一下
        //分块策略，（把指定的公共模块分离出来，后续使用无需二次打包）
        splitChunks: {
            // 缓存组：用于继承/覆盖
            cacheGroups: {
                ajaxVendors: {
                    //查找范围
                    test: /ajax\.js/,
                    //拆分模块的模式
                    chunks: 'all',
                    //最小引用次数
                    minChunks: 2,
                    //最小体积
                    minSize: 0,
                    //导出文件名,拆分的名字可以跟最外层的名字一样，方便查看
                    name: 'ajaxVendors'
                    //如果没写查找范围就要写优先级
                },
                commonVendors: {
                    //查找范围
                    test: /common\.css/,
                    //拆分模块的模式
                    chunks: 'all',
                    //最小引用次数
                    minChunks: 2,
                    //最小体积
                    minSize: 0,
                    //导出文件名,拆分的名字可以跟最外层的名字一样，方便查看
                    name: 'commonVendors'
                }
            }
        }
    }

}